<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	<link type="text/css" rel="Stylesheet"
		href="../../css/jquery-ui-1.8.20.custom.css" />

	<link type="text/css" rel="Stylesheet" href="../../css/style_coopac.css" />

	<script src="../../css/js_coopac.js" type="text/javascript"></script>

</h:head>

<h:body>



	<div id="contenedor">
		<div id="headerAdmision"></div>

		<div id="menu">
			<ui:include src="../00_genericos/menu.xhtml"></ui:include>
		</div>

		<div id="formularios">
			<h:form id="form" prependId="true">
				<div id="cuerpo">
				<p:panel header="Reportes"
						style="font-size:20px; height:50px;">
					</p:panel>
					<p:panel header="Reporte Potenciales Socios" toggleable="true">
						<div class="rowForm">
						
							<div class="label">
								<label>Fecha Inicial:</label>
							</div>
							<div class="calendar"><!--
								<p:calendar id="xx" value="#{chart.xx}"   pattern="dd/MM/yyyy" />
								--><p:calendar locale="es" showButtonPanel="true" navigator="true" id="xx" value="#{chart.xx}" pattern="dd/MM/yyyy"/>
							</div>
							<div class="label">
								<label>Fecha Final:</label>
							</div>
							<div class="calendar">
								<p:calendar locale="es" showButtonPanel="true" navigator="true" id="yy" value="#{chart.yy}" pattern="dd/MM/yyyy"/>
							</div>
							<div class="label">
								<label>Buscar:</label>
							</div>
							<div class="buttonProcess">
								<p:commandButton  actionListener="#{chart.tablaConRangos}" 
								value="Procesar" update=":form">
								</p:commandButton>
							</div>
							
						</div>
						<div class="chart">
						    <h:form id="formi">
						      
	  							<p:pieChart id="sample" 
	  							value="#{chart.pieModel}" legendPosition="w"
	  							showDataLabels="true"/> 
	      					</h:form>
						</div>
						
						

					    <p:dataTable id="basic" var="car" value="#{chart.listReporte}">  
					        <p:column id="modelHeader">  
					            <f:facet name="header">  
					                    Tipo de Cuenta  
					            </f:facet>  
					            <h:outputText value="#{car.coopactipocuenta.nombre}" />  
					        </p:column>  
					  
					        <p:column>  
					            <f:facet name="header">  
					                    Total
					            </f:facet>  
					            <h:outputText value="#{car.sumaCuentas}" />  
					        </p:column>  
					  
					    <p:column>
                            <f:facet name="header">
                                <h:outputText value="Detalles"/>
                            </f:facet>
                            <p:commandLink value="Ver Detalles" />
                            
                            <p:commandButton icon="ui-icon-search" update=":form:carDetail:"  onclick="carDialog.show()" title="View Detail">  
								<f:setPropertyActionListener value="#{car}" target="#{chart.selectedReporte}" />  
								
			                </p:commandButton>  
                            
                        </p:column>
					  
					  
					    </p:dataTable>

						
	 					<div class="rowFormProcess">
	 						<div class="label" style="visibility:hidden;">
	 							<label>1</label>
	 						</div>
	 						<div class="label" style="visibility:hidden;">
	 							<label>1</label>
	 						</div>
							<div class="buttonProcess">
								<p:commandButton value="Imprimir" ajax="false">
									<p:printer target=":form:basic"/>  
								</p:commandButton>
							</div>
						</div>

					</p:panel>
					
					<p:panel header="Reporte Potenciales Socios II" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Fecha Inicial:</label>
							</div>
							<div class="calendar">
								<p:calendar></p:calendar>
							</div>
							<div class="label">
								<label>Fecha Final:</label>
							</div>
							<div class="calendar">
								<p:calendar></p:calendar>
							</div>
						</div>
						
						<p:dataTable id="multiCarsFF" var="cuent"
							value="#{persona.cuentas}" paginator="false"
							selection="#{persona.selectedCuentas}">
							<p:column selectionMode="multiple" style="width:18px" />
							<p:column headerText="Elegir los tipos de cuentas">  
										#{cuent.nombre}
					        		</p:column>
						</p:dataTable>
						
						<p:dataTable id="multiCars9" var="credit"
							value="#{persona.creditos}" paginator="false"
							selection="#{persona.selectedCreditos}">
							<p:column selectionMode="multiple" style="width:18px" />
							<p:column headerText="Eligir los tipos de crédito">  
										#{credit.nombre}
					      	  		</p:column>
						</p:dataTable>
					</p:panel>	
	
				</div>
				
				<p:dialog header="Car Detail" widgetVar="carDialog" modal="true" showEffect="fade">  
				 <p:outputPanel id="carDetail" style="text-align:center;" layout="block">  
					#{chart.selectedReporte.coopactipocuenta.nombre}      #{chart.selectedReporte.sumaCuentas}  
				</p:outputPanel>
			</p:dialog>
			
			<!-- REMASTERIZACION DE PANTALLA -->
		    <p:panel header="Lista de Personas">
			
			<p:dataTable id="tablaConsultaPersona" var="tcp"
				value="#{reporteAdmision.personaCompletaList}"
				paginator="true" rows="24" rowKey="#{tcp.persona.apellidoPaternoRazonSocial}"
				selection="#{reporteAdmision.personaCompleta}"
				selectionMode="single">

				<f:facet name="header">
				           Directorio de socios potenciales
				</f:facet>
		
				<p:column headerText="Paterno" style="text-align:center" >
						#{tcp.persona.apellidoPaternoRazonSocial}
				</p:column>
				<p:column headerText="Materno" style="text-align:center">
						#{tcp.persona.apellidoMaterno}
				</p:column>
				<p:column headerText="Nombres" style="text-align:center">
					 	#{tcp.persona.nombrePersonaNombreComercial}
				</p:column>
				<p:column headerText="Documento" style="text-align:center">
					 	#{tcp.documentoXPersona[0].numero}
				</p:column>
				<p:column headerText="Direccion" style="text-align:center">
					 	#{tcp.direccionXPersona[0].direccionResumen}
				</p:column>
				<p:column headerText="Telef 1" style="text-align:center">
					 	#{tcp.telefonoXPersona[0].numero}
				</p:column>
				<p:column headerText="Telef 2" style="text-align:center">
					 	#{tcp.telefonoXPersona[1].numero}
				</p:column>
				
				<p:columnGroup type="footer"><!--  
           					<p:row>  
           						<p:column footerText=""/>  
                 			</p:row>
        		--></p:columnGroup> 
        		
			</p:dataTable>
			<!-- PARTE 1  -->
		
			</p:panel>
			
			<!-- PARTE 2  -->
			<p:panel header="detalleConsultas">
				<p:dataTable id="tablaDetalleCuenta" var="tdcue"
					value="#{reporteAdmision.tipoCuentaDataModel}" paginator="true" rows="5"
					selection="#{reporteAdmision.selectedCuentas}">
					
					<f:facet name="header">  
            			Lista de créditos
       				</f:facet>  
  
       				<p:column selectionMode="multiple" style="width:18px" />  
					
					<p:column headerText="Cuenta">  
								#{tdcue.nombre}
			      	</p:column>
			      	<p:column headerText="Descripcion">  
								#{tdcue.descripcion}
			      	</p:column>
			      	<p:column headerText="Requisitos">  
								#{tdcue.requisitos}
			      	</p:column>
			      	<p:column headerText="Beneficios">  
								#{tdcue.beneficios}
			      	</p:column>
				</p:dataTable>
				
				<p:dataTable id="tablaDetalleCredito" var="tdcre"
					value="#{reporteAdmision.tipoCreditoDataModel}" paginator="true" rows="5"
					selection="#{reporteAdmision.selectedCreditos}">
				
					<f:facet name="header">  
            			Lista de cuentas
       				</f:facet>  
  
       				<p:column selectionMode="multiple" style="width:18px" />
					
					<p:column headerText="Credito">  
								#{tdcre.nombre}
			      	</p:column>
			      	<p:column headerText="Descripcion">  
								#{tdcre.descripcion}
			      	</p:column>
			      	<p:column headerText="Requisitos">  
								#{tdcre.requisitos}
			      	</p:column>
			      	<p:column headerText="Beneficios">  
								#{tdcre.beneficios}
			      	</p:column>
				</p:dataTable>
  
			</p:panel>
			<!-- PARTE 2  -->
			
			<p:panel header="Consultas por Personas">
			
			    <h:panelGrid id="grid" columns="3" style="margin-bottom:10px">  
       				<h:outputLabel for="template" value="Template:" style="font-weight:bold"/>  
        			<p:inputText id="template" value="#{tableBean.columnTemplate}" size="50"/>  
       			 	<p:commandButton id="btn" update="cars" actionListener="#{tableBean.updateColumns}" value="Update" process="@parent"/>  
   				 </h:panelGrid>
			
				  <p:dataTable id="tablaConsultaPersona" var="car" value="#{tableBean.carsSmall}">                      
	        		<p:columns value="#{tableBean.columns}" var="column" columnIndexVar="colIndex"   
	                    sortBy="#{car[column.property]}" filterBy="#{car[column.property]}">  
	           		 <f:facet name="header">  
	                	#{column.header}  
	            	</f:facet>  
	           			 #{car[column.property]}  
	       			 </p:columns>  
    			</p:dataTable>  
			</p:panel>
				
			</h:form>
		</div>


		<div id="footerAdmision"></div>
		
		

	</div>
</h:body>

</html>